<!--# layout("/common/mallout.html"){ -->

<link rel="stylesheet" href="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fstyle%2Fbase.css">
<link rel="stylesheet" href="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fstyle%2Fproduct.css">

<style>
    .the_custom_ipt{
        width: 68px;
        height: 30px;
        border: 1px solid #cccccc;
        font-weight: 200;
    }
</style>

<!-------------------------------------->
<div class="center">

    <!--# if(code != 0){-->
    <div style="height:320px; background:url('https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_04.png') center center no-repeat; text-align:center;  font-size:22px; color:rgb(208,208,208); overflow:hidden;"><p style="margin-top:250px;">暂无！</p></div>
    <!--# }else{-->
    <div class="section">
        <input type="hidden" id="categoryId" value="${quoteProductInfo.categoryId}">
        <!-- 商品详情 -->
        <div class="page-maincontent">
            <!----------左侧----------->
            <div class="product-side product-img">
                <div class="product-album-preview">
                    <!--# if(quoteProductInfo.defaultImage == null){-->
                    <img src="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_02.png">
                    <!--# }else{-->
                    <img src="${imagepath}/${quoteProductInfo.defaultImage}">
                    <!--# }-->
                </div>
                <div class="product-album-thumb">
                    <span class="flip_prev flip"></span>
                    <div class="thumbnail-list">
                        <ul>
                            <!--# if(quoteProductInfo.categoryImageList!= null){-->
                                <!--# for(cil in quoteProductInfo.categoryImageList){-->
                                    <li>
                                        <a href="javascript:">
                                            <img src="${imagepath}/${cil}">
                                        </a>
                                    </li>
                                <!--# }-->
                            <!--# }-->

                        </ul>
                    </div>
                    <span class="flip_next flip"></span>
                </div>
            </div>


            <!----------右侧---------->
            <div class="product-spec-box">
                <div class="product-titles">
                    <!--<h2>精装画册</h2>-->
                    <!--<p>安装便携，携带方便</p>-->
                </div>

                <input type="hidden" id="optionAttr">

                <!--------------工艺参数-------------------------->
                <div class="product-spec-price-shipping product-buy">
                    <ul class="level1">
                        <!--分部件循环**************************-->

                        <!--#  for(quotePart in  quoteProductInfo.quotePartsList){ var craftNum = 0;-->
                        <li class="product" clsid="${quotePart.constructId}">
                            <!--是否必选部件-->      <!--# if(quotePart.mustChoice == true){-->
                            <ul class="product-buy-ul level2" noneId="${quotePart.constructId}">
                                <!--# }else{  -->
                                <ul class="product-buy-ul level2" noneId="${quotePart.constructId}" style="display: none">
                                    <!--#}-->

                                    <li>
                                        <div class="partTitle">
                                            <label class="label">${quotePart.name}：</label>
                                            <!--# for(attr in quotePart.quoteAttributeList){-->
                                            <!--# if(attr.attributeType == 'craft' && attr.mustChioce!= true ){craftNum++;}-->
                                            <!--# }-->
                                            <!--# if(craftNum>0){-->
                                            <p class="item-con-01" gongyiId="${quotePart.constructId}">
                                                <em class="tianjia"><em></em><strong>添加工艺</strong></em>
                                            </p>
                                            <!--# }-->
                                        </div>
                                        <div class="mainBody">


                                            <div class="product-list-can">
                                                <!--# for(attr in quotePart.quoteAttributeList){-->
                                                <!--隐藏的必选属性-->
                                                <!--# if(attr.attributeDisplay == false && attr.mustChioce == true ){-->
                                                <p class="item-con-01 attr_hide" optionid="${attr.id}" style="display:none;" attributeTypeValue="${attr.attributeTypeValue}">
                                                    <i>${attr.name}</i>
                                                    <!--# var s = 0; for(opt in attr.quoteAttributeOptionList){s = optLP.size;}-->

                                                    <!--# if(s<5){ -->
                                                    <!--# for(option in attr.quoteAttributeOptionList){-->
                                                    <span class="item-con-01-span ${option.defaultOption == true? 'atv':''}" specvalueid="${option.id}" attributetypevalue="${attr.attributeTypeValue}">${option.name}<em></em></span>
                                                    <!--# }-->
                                                    <!--# }else{-->
                                                    <span class="item-con-01-span" >
                                                                    <select class="ziding_dow" attributetypevalue="${option.attributeTypeValue}">
                                                                    <!--# for(option in attr.quoteAttributeOptionList){-->
                                                                        <option value="${option.id}" ${option.defaultOption==true ? 'selected':''}>${option.name}</option>
                                                                        <!--# }-->
                                                                    </select>
                                                                    </span>
                                                    <!--# }-->
                                                </p>
                                                <!--# }-->

                                                <!--部件体部分**************-->            <!--# if((attr.attributeType == 'normal') || (attr.attributeType == 'craft' && attr.attributeDisplay == true && attr.mustChioce == true)){-->

                                                <!--# //遍历quoteAttributeOptionList 里面的属性
                                                  var d = 0;var f = 0; var canDef = 0;
                                                     for (quoteAttributeOption  in attr.quoteAttributeOptionList){ // 当前 选项不可自定义 但是父类 可以自定义 并且没有默认值
                                                     if(quoteAttributeOption.canDefinition == true){canDef = 1;}

                                                       if(quoteAttributeOption.canDefinition == true ){
                                                            d = 1;
                                                            if(quoteAttributeOption.defaultOption==true){d = 2;}
                                                       } -->
                                                <!--# } -->
                                                <!--# if(attr.canDefinition == true && d != 1){  f = 1;-->
                                                <!--# }-->

                                                <!--# var sl = 0 ;var nl = 0;var firstName = ''; for(opt in attr.quoteAttributeOptionList){s = optLP.size; if(optLP.first){firstName=opt.name;} }-->

                                                <!--# if(sl<=3 ){ firstName = strutil.length(firstName); if(firstName>10){nl = 1;} -->
                                                <!--# }-->

                                                <p class="item-con-01" ${nl==1? 'style=position:relative;padding-left:85px;box-sizing:border-box;' :''}  optionid="${attr.id}" attributetypevalue="${attr.attributeTypeValue}">
                                                    <i  ${nl==1? 'style=position:absolute;left:5px;' : ''}>${attr.name}</i>
                                                    <!--# var s = 0; for(opt in attr.quoteAttributeOptionList){s = optLP.size;}-->

                                                    <!--# if(s<=3){ -->
                                                    <!--# for(option in attr.quoteAttributeOptionList){-->
                                                    <span ${nl==1? 'style=width:245px;margin-bottom:5px' : ''}  class="item-con-01-span ${option.defaultOption == true? 'atv':''}" specvalueid="${option.id}" definitionlength="${option.definitionLength}">${option.name}<em></em></span>
                                                    <!--# }-->
                                                    <!--# }else{-->
                                                    <span class="item-con-01-span" >
                                                <select class="ziding_dow" attributetypevalue="${attr.attributeTypeValue}">
                                                <!--# for(option in attr.quoteAttributeOptionList){-->
                                                    <option value="${option.id}" ${option.defaultOption==true ? 'selected':'' } definitionlength="${option.definitionLength}">${option.name}</option>
                                                    <!--# }-->
                                                </select>
                                                </span>
                                                    <!--# }-->
                                                </p>


                                                <p class="item-con defindArea" optionid="${attr.id}" parentId="${quotePart.constructId}" attrcandef="${canDef == 1?'1':0}">
                                                    <span class="the_custom ${ f==1 ? '':'noClick'}" style="display:${f==1 ? '':'none'};" defId="${attr.id}" parentId="${quotePart.constructId}" val="${attr.definitionLength}" attributeTypeValue="${attr.attributeTypeValue}"><em></em>自定义</span>
                                                    <span class="defInput" style="display:${f==1 ? '':'none'};" id="span_${attr.id}_${quotePart.constructId}" defId="${attr.id}" attributeTypeValue="${attr.attributeTypeValue}">
                                            </span>
                                                </p>

                                                <!--# }-->

                                                <!--# if(attr.attributeType == 'material'){ var optionKey = "";-->
                                                <p class="item-con-01" attributeTypeValue="${attr.attributeTypeValue}" optionid="${attr.id}" >
                                                    <i>${attr.name}</i>
                                                    <span class="item-con-01-span">
                                                   <select class="materialKey" >
                                                       <!--# for(option in attr.quoteAttributeOptionList){ if(option.defaultOption == true){optionKey = option.optionKey;}-->
                                                       <option value="${option.optionKey}" ${option.defaultOption == true? 'selected' : ''}>${option.name}</option>
                                                       <!--# }-->
                                                   </select>
                                                </span>
                                                    <span class="item-con-01-span" >
                                                   <select class="optionKey" attributetypevalue="${attr.attributeTypeValue}">
                                                          <!--# for(option in materialMap){-->
                                                       <!--# if(option.key == quotePart.constructId){-->
                                                       <!--# for(val in option.value){-->
                                                       <!--# if(val.optionKey == optionKey){-->
                                                                    <option value="${val.id}" optionKey="${val.optionKey}" ${val.defaultOption == true? 'selected' : ''}>${val.name}</option>
                                                       <!--#}else{-->
                                                                    <option value="${val.id}" style="display: none" optionKey="${val.optionKey}" >${val.name}</option>
                                                       <!--#}-->
                                                       <!--# }-->
                                                       <!--# }-->
                                                       <!--# }-->
                                                   </select>
                                               </span>
                                                </p>

                                                <!--# if(quotePart.selfPaper == true){-->
                                                <p class="item-con">
                                                    <span class="the_custom selfPaper" ><em></em>自来纸</span>
                                                </p>
                                                <!--# }-->

                                                <!--# }-->
                                                <!--# if(attr.attributeType == 'craft' && attr.mustChioce!= true ){craftNum++;}-->

                                                <!--# }--> <!--此处是部件循环体结束-->

                                            </div>
                                        </div>


                                    <li class="gongyi" gongyiId="${quotePart.constructId}">
                                        <label class="label">${quotePart.name}：</label>
                                        <div class="product-list-can">
                                            <!--# for(attr in quotePart.quoteAttributeList){-->
                                            <!--# if(attr.attributeType == 'craft' && attr.mustChioce != true ){-->
                                            <p class="item-con-02" attributeTypeValue="${attr.attributeTypeValue}" optionid="${attr.id}" >
                                                <i class="atv_show"  customLimitValue="${attr.definitionLength}" ><em></em>${attr.name}</i>
                                                <!--# for(opt in attr.quoteAttributeOptionList){-->
                                                <span class="item-con-02-span bor-no" specvalueid="${opt.id}">${opt.name}<em></em></span>
                                                <!--# }-->
                                                <!--# if(attr.canDefinition== true){-->
                                                <b class="the_custom_input defInput" id="span_${attr.id}_${attr.constructId}" defId="${attr.id}" attributeTypeValue="${attr.attributeTypeValue}">
                                                    <input type="text" class="the_custom_ipt zdy"><img src="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fimage%2Fzy_img_04.png"><input type="text" class="the_custom_ipt last zdy">
                                                </b>
                                                <!--# }-->
                                            </p>
                                            <!--# }-->
                                            <!--# }-->
                                        </div>
                                    </li>
                                    </li>

                                </ul>


                                </li>
                                <!--#}-->
                            </ul>
                </div>

                <!--# for(quotePart in  quoteProductInfo.quotePartsList){-->
                <!--# if(quotePart.mustChoice == false){-->
                <div class="clear_bot"><span class="but_up" id="${quotePart.constructId}">可选${quotePart.name}<em></em></span></div>
                <!--# }-->
                <!--# }-->


            </div>
            <!----------------->
            <!-----------参数分类  模块----------->
            <div class="product-spec-price-box" style="float: right;margin-top: 10px;">
                <span class="item-label" style="padding-right: 6px;">区域选择:</span>
                <div class="item-content">
                             <span class="spec-attr address_text">
                            	<a href="javascript:void(0)">湖北 武汉市 江汉区</a><s></s>
                                <div class="address_select">
                                    <div class="address_tab">
                                        <span class="atver"><i>湖北</i></span>
                                        <span><i>武汉</i></span>
                                        <span><i>江汉区</i></span>
                                    </div>
                                    <div style="display:none;">
                                        <select class="address_op"></select>
                                        <select class="address_op"></select>
                                        <select class="address_op"></select>
                                    </div>
                                    <div class="address_con">

                                    </div>
                                    <div class="address_con">

                                    </div>
                                    <div class="address_con">

                                    </div>
                                </div>
                             </span>
                </div>
            </div>
            <!----------参数分类  模块end----------------->
            <div class="product-spec-price-box"  style="float: right;margin-top: 10px;margin-bottom: -5px;">
                <span class="item-label"></span>
                <div class="item-content">
                    <button type="submit" class="action-buynow" categoryType="${quoteProductInfo.categoryType}">选择供应商</button>
                </div>
            </div>

        </div>


        <!-------------------图文详情-------------------------------->
        <div style="clear:both;"></div>
        <div class="product_section">
        <div class="product_detail">
        <div class="detail-content" style="display: block;min-height: 45px;">
        </div>
        </div>
        </div>

    </div>

    <!--# }-->

    <!-------------------------------------->
</div>



<!-------------------------------------->
<script src="http://www.11ziyun.com/js/region.js"></script>

<!--引入js-->
<script type="text/javascript"  src="${ctxPath}/js/mall/categoryQuoteProduct.js?v=${jsVer}"></script>

<!--#} -->

<script>

var outAttr = ${outAttrJ}; //属性互斥
var outOpt = ${outOptJ};  //选项互斥

//******************************互斥事件*********************
//选项排他规则 只有当n-1满足时才生效
function n_1_outids(attrArr,optionArr){
    //如果长度不满足n-1，则不需要判断
    var attrArrCount = attrArr.length; //所有选中的值
    var optionArrCount = optionArr.length; //选项排他 的 值
    var temp_arr = optionArr.slice(); //选项排他 的 值
    var conditonCount = 0;
    if((optionArrCount - 1) > attrArrCount){
        return false;
    }
    for(var x in temp_arr){
        if($.inArray(temp_arr[x],attrArr) >= 0){
            conditonCount++;		//满足条件的数量
            temp_arr.splice(x,1,0);//把满足条件的元素替换成0
        }
    }
    if(conditonCount +1 >= optionArrCount){
        for(var y in temp_arr){
            if(temp_arr[y] != 0){
                return temp_arr[y];
            }
        }
    }
    return false;
}


//监听所有的下拉框变化
$("ul.level1").children("li").find("ul.level2").on('change',"span select[attributetypevalue]",function () {
    var v = $(this).val(); //当前下拉框选中的值
    var clsid = $(this).parents("ul.level2").attr("noneid"); //当前分类的id

    out_attr($(this),clsid,v); //属性排他

    out_opt(clsid);//选项排他

});

//监听所有的span点击事件
$("ul.level1").children("li").find("ul.level2").on('click',"span[specvalueid]",function () {
    if(!$(this).hasClass('bor-no'))
    {
        if(!$(this).hasClass('atv'))
        {
            $(this).addClass('atv').siblings('span').removeClass('atv');
            $(this).siblings(".the_custom_input").css("display","inline-block");
        }
        else{
            //  $(this).removeClass('atv')
            //$(this).siblings(".the_custom_input").css("display","none");
        }
    }

    // if($(this).hasClass("bor-no")){
    //     return;
    // }
    var v = $(this).attr("specvalueid");
    var clsid = $(this).parents("ul.level2").attr("noneid"); //当前分类的id

    out_attr($(this),clsid,v); //属性排他

    out_opt(clsid);//选项排他

});

//***************************** 函数：选项排他*******************************
function out_opt(clsid) {
    //首先得到当前分类下的所有下拉框，span框，后套工艺里面的值
    var $allSelect = $("ul.level2[noneid="+clsid+"]").find("select[attributetypevalue]");//找到所有含attributetypevalue的下拉框

    var $allSpan =  $("ul.level2[noneid="+clsid+"]").find("span.atv");//获得所有span选择框 包含后道工艺

    if( typeof outOpt[clsid] !=='undefined' && outOpt[clsid].length){ //判断是否有排他属性
        var allVal = [];
        //将选中的值放入数组
        $allSelect.each(function () {
            var vs = $(this).val();
            if(Boolean(vs)){
                allVal.push( parseInt(vs) );    //【重要】转换成整数,因为接口返回的是整数
            }
            $(this).find('option').show();  //先全部显示
        });

        $allSpan.each(function () {
            var vs = $(this).attr("specvalueid");
            if(Boolean(vs)){
                allVal.push( parseInt(vs) );    //【重要】转换成整数,因为接口返回的是整数
            }
            $(this).show();  //先全部显示
            $(this).removeClass("mutual");//全部去掉虚框
        });

        for(var j=0; j<outOpt[clsid].length; j++){
            var out = n_1_outids(allVal,outOpt[clsid][j].slice());//克隆一份数组传递
            if(out){ //如果存在那个值
                $allSelect.each(function () {
                    var obj = $(this);
                    obj.find("option").each(function () {
                        if($(this).val() === out){
                            $(this).removeAttr('selected').hide();  //隐藏opt,并去掉selected属性
                            obj.find("option:visible").removeAttr('selected').first().attr("selected", true); //select框的值选择第1个
                        }
                    });
                });

                $allSpan.each(function () {
                    if($(this).attr("specvalueid") === out){
                        $(this).addClass("mutual");
                        $(this).parent("p[attributetypevalue]").find("span:not(mutual)").eq(0).addClass("atv");
                    }
                });


            }

        }
    }
}


//***************************** 函数：属性排他*******************************
function out_attr(obj, clsid, v) {
    var $attr01 =  obj.parents("ul.level2").find("p.item-con-01");    //得到当前分类的 li   属性排他不 跨 部件 找到当前的分类
    $attr01 = $.grep($attr01, function( n, i ) { //过滤数组并返回
        return (!$(n).hasClass("attr_hide"));
    });
    $attr01 = $($attr01); //分类下非工艺的属性
    var $attr02 =  obj.parents("ul.level2").find("p.item-con-02");//分类下工艺的属性

    if(Boolean(v) && typeof outAttr[clsid][v] !== 'undefined'){

        if(obj.is("select")){
            obj.find("option").each(function () {  //循环选中option的兄弟元素
                var val01 = $(this).val();
                if (val01 == v) return true;   //跳过自己

                if (typeof outAttr[clsid][val01] !== 'undefined') {
                    //【不区分分类，全部属性扫描】进行显示处理，含后道工序里面的
                    var attrReg01 = outAttr[clsid][val01];
                    if (attrReg01.length) {
                        $attr01.each(function () {
                            var attrid = parseInt($(this).attr('optionid'));
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                        $attr02.each(function () {
                            var attrid = parseInt($(this).attr('optionid')); //得到当前分类 全部显示
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                    }
                }
            });
        }else{
            obj.siblings("span").each(function () {
                var val01 = $(this).attr('specvalueid');
                if (typeof outAttr[clsid][val01] !== 'undefined') {
                    //【不区分分类，全部属性扫描】进行显示处理，含后道工序里面的
                    var attrReg01 = outAttr[clsid][val01];
                    if (attrReg01.length) {
                        $attr01.each(function () {
                            var attrid = parseInt($(this).attr('optionid'));
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                        $attr02.each(function () {
                            var attrid = parseInt($(this).attr('optionid')); //得到当前分类 全部显示
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                    }
                }
            });
        }

            //进行当前选项的【隐藏】处理，含后道工序里面的
            var attrReg01 = outAttr[clsid][v];
            if(attrReg01.length){
                $attr01.each(function(){
                    var attrid = parseInt( $(this).attr('optionid') );
                    if(-1 !== $.inArray(attrid, attrReg01) ){
                        $(this).hide();
                    }else{
                        $(this).show();
                    }
                });
                $attr02.each(function () {
                    var attrid = parseInt($(this).attr('optionid')); //得到当前分类 全部显示
                    if (-1 !== $.inArray(attrid, attrReg01)) {
                        if(obj.hasClass("atv") || !obj.hasClass("item-con-02-span")){
                            $(this).hide();
                         }else{
                            $(this).show();
                         }
                    }else{
                        $(this).show();
                    }
                });
            }


    }else{
        if(obj.is("select")){
            obj.find("option").each(function () {  //循环选中option的兄弟元素
                var val01 = $(this).val();
               // if (val01 == v) return true;   //跳过自己

                if (typeof outAttr[clsid][val01] !== 'undefined') {
                    //【不区分分类，全部属性扫描】进行显示处理，含后道工序里面的
                    var attrReg01 = outAttr[clsid][val01];
                    if (attrReg01.length) {
                        $attr01.each(function () {
                            var attrid = parseInt($(this).attr('optionid'));
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                        $attr02.each(function () {
                            var attrid = parseInt($(this).attr('optionid')); //得到当前分类 全部显示
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                    }
                }
            });
        }else{
            obj.siblings("span").each(function () {
                var val01 = $(this).attr('specvalueid');
                if (typeof outAttr[clsid][val01] !== 'undefined') {
                    //【不区分分类，全部属性扫描】进行显示处理，含后道工序里面的
                    var attrReg01 = outAttr[clsid][val01];
                    if (attrReg01.length) {
                        $attr01.each(function () {
                            var attrid = parseInt($(this).attr('optionid'));
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                        $attr02.each(function () {
                            var attrid = parseInt($(this).attr('optionid')); //得到当前分类 全部显示
                            if (-1 !== $.inArray(attrid, attrReg01)) {
                                $(this).show();
                            }
                        });
                    }
                }
            });
        }
    }
};



$(document).on("change","select.materialKey",function () {
    var val = $(this).val();
    $(this).parent().next("span").find("select option").each(function () {
        $(this).removeAttr('selected');
        $(this).css("display","none");
        if($(this).attr("optionKey") === val){
            $(this).css("display","block");
        }
    });
    $(this).parent().next("span").find("select option[optionkey="+val+"]").eq(0).attr('selected','selected');
    $(this).parent().next("span").find("select").val($(this).parent().next("span").find("select option[optionkey="+val+"]").eq(0).val());
    //【重要】要触发change事件，执行排他规则
     $(this).parent().next("span").find("select").trigger("change");
})


</script>